DESARROLLO DE PAGINAS WEB

Curso De Programacion y Desarrollo Web-BootCamp Online School-(Introduccion)

La programación es el proceso de escribir instrucciones

que una computadora puede seguir para realizar tareas específicas. Estas instrucciones se escriben en lenguajes de programación, como Python, Java, JavaScript, C++, entre otros. La programación permite a los desarrolladores crear software, aplicaciones, sitios web, sistemas operativos, y otros productos tecnológicos.
El desarrollo web, por su parte, es una rama de la programación enfocada en la creación y mantenimiento de sitios y aplicaciones web.

Involucra dos aspectos principales

:

Front-end:
Se refiere a la parte visible e interactiva del sitio web, lo que los usuarios ven y con lo que interactúan. Esto incluye el diseño, la estructura y la experiencia de usuario (UX/UI). Lenguajes comunes en el desarrollo front-end incluyen HTML (para el contenido), CSS (para el diseño y la apariencia) y JavaScript (para la interactividad).
Back-end:
Se refiere a la parte "detrás de escena" del sitio web, lo que sucede en el servidor. Aquí es donde se gestionan las bases de datos, la lógica de la aplicación y la comunicación entre el servidor y el navegador del usuario. Lenguajes como Python, Ruby, PHP, Node.js, y bases de datos como MySQL o MongoDB, suelen utilizarse en el desarrollo back-end.
El desarrollo web requiere tanto conocimientos de diseño visual como de lógica de programación y bases de datos para crear soluciones completas que sean atractivas, funcionales y eficientes.

Qué es un sitio web

Un sitio web es una colección de páginas web alojadas en un servidor web a las que se puede acceder a través de Internet. Los sitios web son plataformas digitales que permiten la comunicación, el intercambio de información y las transacciones en línea.
Pueden emplearse con propósitos personales, como blogs o para compartir información sobre hobbies e intereses. En el caso de las empresas, un sitio web funciona como una tienda virtual donde los clientes pueden visualizar productos o servicios, realizar compras y comunicarse con la empresa para obtener atención al cliente.
Además, son comúnmente utilizados con fines educativos, ya que muchas escuelas y universidades cuentan con sus propios sitios web para compartir información y recursos con los estudiantes. Asimismo, las instituciones y las organizaciones no gubernamentales (ONG) los utilizan para crear conciencia sobre sus causas y conectarse con posibles donantes.

Cuál es la diferencia entre un sitio web y una página web

Comprender las diferencias entre un sitio web y una página web es esencial para una navegación efectiva en el entorno digital. Una página web representa un único documento o página dentro de un sitio web. Estas páginas contienen información en formato de texto, imágenes, videos, enlaces y otros recursos multimedia, y están diseñadas para ser vistas mediante un navegador web (como Google Chrome, Firefox o Safari). Los sitios web pueden contar con múltiples páginas web, todas conectadas entre sí mediante hipervínculos, para crear una experiencia de navegación en cadena.

Un sitio web se compone de una colección de páginas web a las que se accede mediante un único nombre de dominio o URL. Los sitios web se construyen utilizando lenguajes como HTML, CSS y JavaScript para lograr diseños y funcionalidades visualmente atractivos.
Cómo funciona un sitio web Primero, hablemos sobre los componentes básicos de un sitio web. Lo primero que hay que entender es Internet y la Web, que proporcionan el terreno para los sitios web.
Internet es la tecnología o infraestructura que conecta las computadoras y facilita el intercambio de información.
La web es el sistema que permite el intercambio de información a través de Internet. Incluye documentos digitales, sitios web, páginas web, medios y más.

Para acceder a un sitio web, los usuarios simplemente necesitan:

Un dispositivo, como una computadora portátil, un teléfono inteligente o una tableta. Un navegador web, como Google Chrome, Internet Explorer, Microsoft Edge, Mozilla Firefox o Safari.

Conexión a Internet.
Cuando ingresas una dirección web o nombre de dominio en tu navegador, tu computadora envía una solicitud al servidor de alojamiento. Esta solicitud pasa a través del Sistema de Nombres de Dominio (DNS) para buscar la dirección de protocolo de internet (IP) del servidor. El servicio web utiliza protocolos como el Protocolo de Transferencia de Hipertexto (HTTP), Protocolo de Transferencia de Hipertexto Seguro (HTTPS) y Protocolo de Transferencia de Archivos (FTP) para transmitir información y archivos a través de la web.
Una vez que el servidor web recibe la solicitud, envía la página web solicitada, junto con imágenes y otros archivos, a tu computadora. El navegador luego muestra la página web utilizando tecnologías como Lenguaje de Marcado de Hipertexto (HTML) y Hojas de Estilo en Cascada (CSS). Estas tecnologías estructuran y presentan la información en la pantalla.

Qué es un servidor web? →

un servidor web es una computadora que almacena y entrega páginas web a los usuarios cuando las solicitan. Es la ubicación física donde se almacenan todos los archivos y datos de un sitio web. Cuando alguien escribe la URL de tu sitio web, el servidor obtiene los archivos necesarios y los muestra para crear la página web.

Qué es un sitio web estático?

Es una colección de páginas web escritas previamente que se muestran tal como se publican. Estos sitios no son interactivos, lo que significa que el material en cada página permanece igual hasta que se actualiza manualmente. La información y la apariencia de los sitios web estáticos son las mismas para todos los espectadores, independientemente de sus navegadores, ubicaciones o dispositivos. A menudo, las empresas optan por sitios web estáticos para establecer una presencia en línea simple, ya que son rentables y no requieren procesamiento del lado del servidor en múltiples idiomas.
Aunque las páginas web estáticas no pueden recibir información de los usuarios, sí pueden contener animaciones y elementos clicables como hipervínculos o botones de navegación. Esto las convierte en una opción popular para sitios de carteras y catálogos.
El sitio web del Tesla Roadster es un ejemplo de un sitio web estático. Muestra texto, imágenes y enlaces de navegación que dirigen a los visitantes a otras páginas.

Qué es un sitio web dinámico

Los sitios web dinámicos son más flexibles y fáciles de usar. Pueden cambiar la información y la apariencia según varios factores, incluida la hora del día, la ubicación del visitante, las preferencias de idioma, las interacciones anteriores con el sitio o el tipo de dispositivo. Con estos sitios, el servidor web procesa datos en tiempo real para generar páginas personalizadas para cada visitante. Además, pueden interactuar con los usuarios a través de formularios, encuestas, cuestionarios y otros factores interactivos que requieren procesamiento del lado del servidor.
Esto hace que los sitios web dinámicos sean más adecuados para negocios de comercio electrónico, redes sociales, reserva de boletos y foros. De igual manera permiten a las personas configurar cuentas, iniciar sesión y acceder a información o servicios personalizados.
El sitio web de Amazon es un ejemplo popular de un sitio dinámico. Su página principal muestra recomendaciones de productos a los visitantes en función de su ubicación, compras e historial de búsqueda.

Componentes básicos de un sitio web

Para crear una página web necesitas varios componentes
Dominio:
para acceder a tu sitio, los usuarios escriben una dirección web única que generalmente refleja el nombre de tu empresa o marca; esto se conoce como dominio. Tener un nombre de dominio es imprescindible y puedes registrarlo a través de un registrador de dominios.
Extensión de dominio:
también llamadas dominios de nivel superior (TLD), las extensiones de dominio se añaden al final del nombre de tu dominio. Estas ayudan a identificar rápidamente aspectos específicos de un sitio web, como su propósito principal, propietario o ubicación geográfica. Algunos ejemplos son .com, .org o .net.
Alojamiento web:
este servicio almacena los archivos de tu sitio web y los hace accesibles para los usuarios en Internet. Al elegir el alojamiento adecuado, puedes optimizar el rendimiento y la seguridad de tu sitio.
Dirección URL:
la dirección de un sitio web también se conoce como el Localizador de Recursos Universal (URL). Cuando un usuario desea abrir un sitio web, debe introducir el URL en un navegador web y el servidor web proporcionará el sitio web solicitado.
Elementos multimedia:
estos abarcan una amplia gama de detalles multimedia, entre ellos, imágenes, videos, archivos de audio y características interactivas del sitio web, como animaciones y contenido adaptativo. Cuando se utilizan adecuadamente, estos elementos pueden hacer que un sitio web genere interés y sea informativo y visualmente atractivo.
Contenido:
el contenido es la información que incluyes en tu sitio web para informar, guiar o influir en los visitantes. Esta información puede presentarse mediante texto, imágenes, videos o grabaciones de audio. La principal responsabilidad del contenido es mantener a las personas interesadas, lo que genera estadías más largas y visitas repetidas a tu sitio. Además, los artículos bien optimizados pueden mejorar tu posición en las páginas de resultados de los motores de búsqueda, lo que desempeña un papel crucial para el posicionamiento en buscadores (SEO)de la página.

Tipos de sitios web

Los sitios web también se pueden dividir en categorías según sus objetivos, características o la audiencia a la que apuntan. Comprender los diferentes tipos de páginas web te ayudará a comenzar con la tuya.
Blogs:
estos sitios se utilizan para publicar artículos o posts, abordando una amplia gama de temas. Muchas empresas comienzan un blog para compartir noticias e información con sus clientes, y lo utilizan como una herramienta de SEO para atraer más visitantes orgánicos.
Comercio electrónico:
un sitio web de comercio electrónico es una tienda en línea que te ayuda a vender productos, servicios y bienes digitales al permitirte aceptar pagos, procesar pedidos, administrar la logística y el envío, y ofrecer ayuda al cliente.
Portafolio:
un portafolio digital muestra el trabajo, las habilidades y la experiencia de una persona o empresa. Se utiliza para atraer clientes potenciales, empleadores o socios al compartir tus proyectos anteriores.
Sitios web de negocios:
los sitios web de negocios tienen como objetivo informar sobre una empresa y atraer clientes potenciales. Su proceso de ventas funciona mejor a través de una cotización o una cita en persona.
Landing page:
una landing page, también conocida como página de aterrizaje o página de destino, es una página web diseñada específicamente para convertir visitantes en leads o clientes potenciales. A diferencia de las páginas web tradicionales, las landing pages tienen un enfoque muy específico.
Noticias:
los sitios web de noticias presentan artículos de noticias, eventos actuales y otra información relevante. A menudo incluyen detalles como videos e imágenes para respaldar sus historias. Los sitios de noticias se actualizan regularmente y se pueden categorizar en diferentes secciones como noticias mundiales, política, deportes o entretenimiento.
Portal:
los sitios web de portal proporcionan a los usuarios acceso, por medio de un proceso de inicio de sesión, a una variedad de recursos e información en un solo lugar centralizado. Estos portales suelen ser grandes y ofrecen contenido diverso y funcionalidades avanzadas.
Foros:
los sitios web de foros reúnen a personas con intereses similares para conectarse entre sí y participar. Puedes usar líneas de tiempo, chats o foros especializados para interactuar. Las redes sociales como Facebook, Instagram, Twitter, Snapchat y Reddit son excelentes ejemplos de foros.

Que es un CMS?

Un CMS (Content Management System, o Sistema de Gestión de Contenidos en español) es una plataforma o software que permite crear, gestionar y actualizar sitios web sin necesidad de tener conocimientos avanzados de programación. Un CMS facilita la organización y administración del contenido (como texto, imágenes, videos, etc.) de manera intuitiva y accesible para los usuarios.

Características principales de un CMS

Interfaz amigable:
Proporciona un panel de control donde los usuarios pueden crear y editar contenido sin necesidad de escribir código.
Gestión de contenido:
Permite agregar, modificar y eliminar páginas web, blogs, artículos, imágenes, y otros tipos de contenido fácilmente.
Temas y plantillas:
Ofrece temas o plantillas pre-diseñadas que definen la apariencia visual del sitio, que pueden personalizarse.
Extensibilidad:
La mayoría de los CMS permiten agregar funcionalidades adicionales a través de plugins o módulos (como formularios de contacto, carritos de compra, SEO, etc.).
Colaboración y roles de usuario:
Permite que múltiples usuarios trabajen en el sitio con distintos roles (como administradores, editores, autores), lo que facilita el trabajo en equipo.
SEO integrado:
Muchos CMS incluyen herramientas para mejorar el posicionamiento en motores de búsqueda (SEO), como optimización de URLs, metaetiquetas y mapas del sitio.

Ejemplos de CMS populares

WordPress:
Es el CMS más utilizado en el mundo, ideal para blogs, sitios informativos y pequeñas tiendas en línea.
Joomla:
Una opción flexible que se utiliza para crear sitios más complejos.
Drupal:
Es conocido por su robustez y flexibilidad, adecuado para sitios grandes y complejos.
Shopify:
CMS especializado en la creación de tiendas en línea.
Magento:
Otro CMS muy utilizado para sitios de comercio electrónico.

Ventajas de usar un CMS

Facilidad de uso:
No se requiere ser un programador para gestionar un sitio web.
Actualizaciones rápidas:
Se pueden realizar cambios de contenido o diseño sin necesidad de acudir a un desarrollador.
Escalabilidad:
Permite crecer o añadir nuevas funcionalidades con el tiempo mediante plugins o módulos.
Seguridad:
Los CMS populares suelen tener actualizaciones constantes que mejoran la seguridad.
En resumen, un CMS es una herramienta fundamental para la creación y gestión de sitios web de manera eficiente y accesible, tanto para individuos como para empresas.

que es un editor web?

es una herramienta o software que permite crear, diseñar y editar páginas web, generalmente sin necesidad de escribir código manualmente. Su propósito es facilitar el desarrollo de sitios web, proporcionando una interfaz gráfica donde los usuarios pueden construir páginas web arrastrando y soltando elementos, añadiendo contenido, y personalizando el diseño visualmente.

Tipos de editores web

Editores WYSIWYG (What You See Is What You Get):
Estos editores muestran una vista visual de cómo se verá la página web una vez publicada, lo que facilita el diseño sin necesidad de escribir código.
Algunas características son:
Arrastrar y soltar:
Los usuarios pueden mover imágenes, texto y otros elementos a la página simplemente arrastrándolos.
Edición en tiempo real:
Lo que ves en el editor es exactamente cómo aparecerá la página web una vez publicada.
Ejemplos de editores WYSIWYG:
Adobe Dreamweaver:
Herramienta avanzada que permite tanto la edición visual como la edición de código.
Wix:
Plataforma en línea que permite crear sitios web mediante una interfaz visual de arrastrar y soltar.
Squarespace:
Otra plataforma de diseño web con un editor visual fácil de usar.
Editores de código:
Estos son para usuarios que tienen conocimientos en programación y prefieren escribir el código manualmente. Proporcionan un entorno para editar lenguajes como HTML, CSS, JavaScript, PHP, entre otros. Aunque no son visuales, suelen ofrecer ayudas como resaltado de sintaxis, autocompletado y depuración.

Ejemplos de editores de código

Sublime Text
Visual Studio Code
Atom

Editores web integrados en CMS:
Muchos CMS (Sistemas de Gestión de Contenidos) incluyen sus propios editores web que combinan funcionalidad WYSIWYG con opciones avanzadas de gestión de contenido. Por ejemplo:
WordPress:
Tiene un editor llamado "Gutenberg", que permite construir páginas utilizando bloques de contenido.
Joomla y Drupal:
También incluyen editores para crear y personalizar páginas web dentro de su sistema.

Ventajas de los editores web

Facilidad de uso:
No necesitas ser programador para crear y modificar un sitio web.
Ahorro de tiempo:
La creación visual de páginas web es más rápida que escribir código desde cero.
Previsualización:
En los editores WYSIWYG, puedes ver en tiempo real cómo se verá tu sitio web una vez publicado.
Limitaciones: Menor control:
En comparación con la programación manual, los editores WYSIWYG pueden ofrecer menos flexibilidad o control total sobre el código y el diseño.
Rendimiento:
Algunos editores pueden generar código HTML/CSS menos optimizado, lo que puede afectar la velocidad o el rendimiento del sitio.
En resumen, un editor web es una herramienta clave para la creación de sitios web, proporcionando diferentes niveles de control y facilidad según las necesidades del usuario, ya sea a través de una interfaz visual amigable o mediante la edición de código.